
        * {
            margin: 0px;
            border: 0px;
        }

        body {
            overflow: hidden;
            background-color: #000000;
        }

        .container {
            left: 0;
            top: 0;
            bottom: 180px;
            right: 0;
            margin: auto;
            height: 360px;
            width: 200px;
            transform-origin: 120% 100%;
            transform-style: preserve-3d;
            animation: 9s rotate linear infinite;

        }

        @keyframes rotate {
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }

            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        .square {
            width: 100px;
            height: 100px;
            transform: translateX(50px) translateY(300px) translateZ(50px);
            transform-style: preserve-3d;
            display: grid;
        }

        .square div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
        }

        .square div:nth-child(1) {
            top: 100px;
            transform-origin: top;
            transform: rotateX(-90deg);
        }

        .square div:nth-child(2) {
            left: 100px;
            transform-origin: left;
            transform: rotateY(90deg);
        }

        .square div:nth-child(3) {
            left: -100px;
            transform-origin: right;
            transform: rotateY(-90deg);
        }

        .square div:nth-child(4) {
            top: -100px;
            transform-origin: bottom;
            transform: rotateX(90deg);
        }

        .square div:nth-child(6) {
            top: 0;
            transform: translateZ(-100px);
        }

        .square div:nth-child(5) {}

        img {
            width: 100px;
            height: 100px;
        }
